<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout/online">
<head>
    <title th:text="${otherUser.getUsername() + ' | JF'}">Title of profile view</title>
</head>
<body>
    <main layout:fragment="content">
        <article class="container" style="padding: 3% 0 2%;">
            <header class="row">
                <div class="col s12">
                    <blockquote class="flow-text left" th:text="${otherUser.getUsername()} + |&apos; s profile|">Profile</blockquote>
                    <blockquote class="flow-text right" th:text="|Points: | + ${points}">Commitment</blockquote>
                </div>
            </header>
            <section class="row">
            		<div class="col s12">
            			<span class="col s6">
                           &nbsp;&nbsp;&nbsp;&nbsp;<span th:text="${otherUser.displayContentOfOptional()}">Introduction</span>
                    </span>
	                	<span th:if="${user.getId() != otherUser.getId() and !isFollowed}" class="chip right">
						<form th:action="@{'/follow/'+${user.getId()}+'_'+${otherUser.getId()}}" method="post">
							<input type="hidden" name="action" th:value="useful" /> 
								<button class="chip left" style="background-color: #37b7ab;">关注</button>
						</form>
					</span>
						<span th:if="${user.getId() != otherUser.getId() and isFollowed}" class="chip right">
						<form>
							<input type="hidden" name="action" th:value="useful" /> 
								<button class="chip left" style="background-color: #37b7ab;">已关注</button>
						</form>
					</span> 
                	</div>
            </section>
            <section class="row">
                <div class="col s12 m6">
                    <ul class="collection">
                        <li class="collection-item center">Personal data</li>
                        <li class="collection-item">
                            <span class="badge">
                                <span th:text="${otherUser.getUsername()}">Nick</span>
                            </span>用户名:
                        </li>
                        <li class="collection-item">
                            <span class="badge">
                                <span th:text="${otherUser.displayParsedDate()}">Created date</span>
                            </span>注册时间:
                        </li>
                        <li class="collection-item">
                        		<a th:href="@{'/fans/' + ${otherUser.getId()}}" style="display: block; color: black">
                        			<span class="badge">
                                		<span th:text="${followNums}">Created date</span>
                            		</span>粉丝:
                        		</a>
                        		<a th:if="${user.getId() != otherUser.getId()}" th:href="@{'/commonfans/' + ${otherUser.getId()} + '_' + ${user.getId()}}" style="display: block; color: #26a69a">
                        			<span class="left">
                                		<span th:text="${user.getUsername()} + 与 + ${otherUser.getUsername()} + 有 + ${commonFansNum} + 个共同粉丝" class="left">Created date</span>
                            		</span>
                        		</a>
                        </li>
                    </ul>
                </div>
                <div class="col s12 m6">
                    <ul class="collection">
                        <li class="collection-item center strong">Activity</li>
                        <li class="collection-item">
                            <a th:href="@{'/topics/user/' + ${otherUser.getId()}+'_'+'1'}" style="display: block; color: #26a69a">
                                <span class="badge">
                                    <span th:text="${numberOfTopics}"></span>
                                </span>Topics:
                            </a>
                        </li>
                        <li class="collection-item">
                            <a th:href="@{'/answers/' + ${otherUser.getId()}}" style="display: block; color: #26a69a">
                                <span class="badge">
                                    <span th:text="${numberOfAnswers}"></span>
                                </span>Answers:
                            </a>
                        </li>
                        <li class="collection-item">
                            <a th:href="@{'/answers/useful/' + ${otherUser.getId()}}" style="display: block; color: #26a69a">
                                <span class="badge">
                                    <span th:text="${numberOfHelped}"></span>
                                </span>Helped:
                            </a>
                        </li>
                    </ul>
                </div>

			<header class="row">
				<div class="col s12">
					<blockquote class="flow-text left" th:text="|照片墙 |">照片墙</blockquote>
				</div>
			</header>

			<div class="row">
				<th:block th:each="imgUrl:${myImgs}">
					<div class="col s12 m6">
						<div class="card">
							<div class="card-image">
								<img th:src="${imgUrl}" width="300" height="400"></img>
							</div>
							<div class="card-action">
								<a th:href="${imgUrl}">点击查看大图</a>
							</div>
						</div>
					</div>
				</th:block>
				<a th:if="${isHasMoreImg}" th:href="@{'/imageWall/'+${otherUser.getId()}}">查看更多的照片...</a>
			</div>
			
			<header class="row" th:if="${switch}">
				<div class="col s12">
					<blockquote class="flow-text left" th:text="|上传照片 |">上传照片</blockquote>
				</div>
			</header>
			
			<form th:action="@{'/upload'}" method="post" enctype="multipart/form-data" th:if="${switch}">
				<div class="file-field input-field">
					<div class="btn">
						<span>选择照片</span> 
						<input type="file" name="file"></input>
					</div>
					<div class="file-path-wrapper">
						<input class="file-path validate" type="text"></input>
					</div>
				</div>
				<div class="row">
					<div class="col s12 center">
						<button class="btn waves-effect waves-light btn-large"
							type="submit" name="add">上传</button>
					</div>
				</div>
			</form>
		</section>
	</article>
    </main>
</body>
</html>